<script setup>
import Demo10Component04Children01 from './demo10-component04-children01.vue';
import Demo10Component04Children02 from './demo10-component04-children02.vue';
import Demo10Component04Children03 from './demo10-component04-children03.vue';
import Demo10Component04Children04 from './demo10-component04-children04.vue';
import Demo10Component04Children05 from './demo10-component04-children05.vue';
import Demo10Component04Children06 from './demo10-component04-children06.vue';
import Demo10Component04Children07 from './demo10-component04-children07.vue';
</script>
<template>
<h2>demo10-component04.vue</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header"> slot</div>
    <div  class="zhtt-demo-card-body">
      <demo10-component04-children01>
        <span style="color:red;">通过slot传给子组件</span>
      </demo10-component04-children01>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>
  <zhtt-card title="多个slot没有指定名称，内容重复">
    <demo10-component04-children02>
      <h4>这是第一个html节点</h4>
      <h4>这是第二个html节点</h4>
      <h4>这是第三个html节点</h4>
    </demo10-component04-children02>
  </zhtt-card>

  <zhtt-card title="slot指定名称">
    <demo10-component04-children03>
      <template v-slot:first>
        <h4>这是第一个html节点</h4>
      </template>
      <template v-slot:second>
        <h4>这是第二个html节点</h4>
      </template>
      <template v-slot:third>
        <h4>这是第三个html节点</h4>
      </template>
    </demo10-component04-children03>
  </zhtt-card>

  <zhtt-card title="slot缩写#">
    <demo10-component04-children03>
      <template #first>
        <h4>这是第一个html节点</h4>
      </template>
      <template #second>
        <h4>这是第二个html节点</h4>
      </template>
      <template #third>
        <h4>这是第三个html节点</h4>
      </template>
    </demo10-component04-children03>
  </zhtt-card>

  <zhtt-card title="第一个slot无name，第二个有name">
    <demo10-component04-children04>
      <template>
        <h4>这是第一个html节点</h4>
      </template>
      <template #second>
        <h4>这是第二个html节点</h4>
      </template>
    </demo10-component04-children04>
  </zhtt-card>
  <zhtt-card title="为插槽添加默认值">
    <demo10-component04-children05></demo10-component04-children05>
    <demo10-component04-children05>保存</demo10-component04-children05>
  </zhtt-card>
  <zhtt-card title="v-slot:default='slotProps'">
    第一个：
    <demo10-component04-children06 v-slot="user">
      <p>从子组件中取到的值：{{user}}</p>
    </demo10-component04-children06>
    <br/>
    第二个：
    <demo10-component04-children06></demo10-component04-children06>
  </zhtt-card>
  <zhtt-card title="v-slot:default='slotProps'">
    <b>第一个：从子组件中取出后渲染</b>
    <demo10-component04-children07 v-slot="item">
      <p>从子组件中取到的值：{{item}}</p>
    </demo10-component04-children07>
    <br/>
    <b>第二个：按子组件默认效果渲染</b>
    <demo10-component04-children07></demo10-component04-children07>
    <b>第三个：插槽 prop（v-slot:default="slotProps"）</b>
    <demo10-component04-children07>
      <template v-slot:default="slotProps">
        <p class="green">{{ slotProps }}</p>
      </template>
    </demo10-component04-children07>
  </zhtt-card>
  <zhtt-card title="独占默认插槽的缩写语法">
  </zhtt-card>
  <zhtt-card title="解构插槽 Prop">
  </zhtt-card>
  <zhtt-card title="动态插槽名">
  </zhtt-card>
  <zhtt-card title="具名插槽的缩写">
  </zhtt-card>
</template>

<script>
export default {
  name: "demo10-component04",
  data(){
    return {
      searchText:null
    }
  }
}
</script>

<style scoped>

</style>